<template>
  <div>
    <el-card>
      <template slot="header"> </template>
      <el-row>
        <el-col :span="19" style="position: relative">
          <!-- 日期选择 -->
          <div style="position: absolute; right: 10px; top: 5px; z-index: 999">
            <span @click="setToday">今日</span>
            &nbsp; &nbsp;
            <span @click="setWeek">本周</span> &nbsp; &nbsp;
            <span @click="setMonth">本月</span> &nbsp; &nbsp;
            <span @click="setYear">今年</span> &nbsp; &nbsp;
            <el-date-picker
              v-model="dateRange"
              value-format="yyyy-MM-dd"
              size="mini"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </div>
          <el-tabs v-model="valueTabName">
            <el-tab-pane label="销售额" name="销售额">
              <div ref="saleChart" style="width: 100%; height: 40vh"></div
            ></el-tab-pane>
            <el-tab-pane label="访问量" name="访问量">
              <div ref="visitChart" style="width: 100%; height: 40vh"></div
            ></el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="5">
          <div class="right">
            <h3>门店{{ valueTabName }}排名</h3>
            <ul>
              <li>
                <span class="index">1</span><span class="name">肯德基</span
                ><span class="rank">325,342</span>
              </li>
              <li>
                <span class="index">2</span><span>肯德基</span
                ><span class="rank">325,342</span>
              </li>
              <li>
                <span class="index">3</span><span>肯德基</span
                ><span class="rank">325,342</span>
              </li>
              <li>
                <span class="index_clear">3</span><span>肯德基</span
                ><span class="rank">325,342</span>
              </li>
              <li>
                <span class="index_clear">3</span><span>肯德基</span
                ><span class="rank">325,342</span>
              </li>
              <li>
                <span class="index_clear">3</span><span>肯德基</span
                ><span class="rank">325,342</span>
              </li>
              <li>
                <span class="index_clear">3</span><span>肯德基</span
                ><span class="rank">325,342</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import * as dayjs from 'dayjs'
export default {
  data() {
    return {
      dateRange: [],
      valueTabName: '销售额',
      mySaleEchart: null,
      myVisitEchart: null,
      saleSource: [],
      visitSource: []
    }
  },
  watch: {
    valueTabName(val) {
      if (val == '销售额') {
        this.$nextTick(() => {
          this.drawSaleImg()
        })
      } else {
        this.$nextTick(() => {
          this.drawVisitImg()
        })
      }
    }
  },
  methods: {
    setYear() {
      const start = dayjs().startOf('year').format('YYYY-MM-DD')
      const end = dayjs().endOf('year').format('YYYY-MM-DD')
      this.dateRange = [start, end]
    },
    setMonth() {
      const start = dayjs().startOf('month').format('YYYY-MM-DD')
      const end = dayjs().endOf('month').format('YYYY-MM-DD')
      this.dateRange = [start, end]
    },
    setWeek() {
      const start = dayjs().day(1).format('YYYY-MM-DD')
      const end = dayjs().day(7).format('YYYY-MM-DD')
      this.dateRange = [start, end]
    },
    setToday() {
      const day = dayjs().format('YYYY-MM-DD')
      this.dateRange = [day, day]
    },
    getRandomData() {
      for (let i = 1; i <= 12; i++) {
        this.saleSource.push({
          num: Math.floor(Math.random() * 10000) + 1,
          time: i
        })
        this.visitSource.push({
          num: Math.floor(Math.random() * 10000) + 1,
          time: i
        })
      }
    },
    drawSaleImg(source = this.saleSource) {
      this.mySaleEchart = echarts.init(this.$refs.saleChart)
      this.mySaleEchart.setOption({
        title: { show: true, text: this.valueTabName },
        xAxis: { name: '月份', axisPointer: { show: true } },
        yAxis: { name: '', axisPointer: { show: true } },
        tooltip: {},
        grid: { bottom: 20 },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        dataset: {
          source
        },
        series: [
          {
            type: 'bar',
            encode: {
              x: 'time',
              y: 'num'
            }
          }
        ]
      })
    },
    drawVisitImg(source = this.visitSource) {
      this.mySaleEchart = echarts.init(this.$refs.visitChart)
      this.mySaleEchart.setOption({
        title: { show: true, text: this.valueTabName },
        xAxis: { name: '月份', axisPointer: { show: true } },
        yAxis: { name: '', axisPointer: { show: true } },
        tooltip: {},
        grid: { bottom: 20 },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        dataset: {
          source
        },
        series: [
          {
            type: 'bar',
            encode: {
              x: 'time',
              y: 'num'
            }
          }
        ]
      })
    }
  },
  created() {
    this.getRandomData()
  },
  mounted() {
    this.drawSaleImg()
  }
}
</script>

<style>
.right {
  margin: 0 0 0 10px;
}
.right h3 {
  text-align: center;
}
.right ul li {
  list-style-type: none;
  margin-top: 5px;
}
.right .index {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: black;
  color: white;
  text-align: center;
  margin: 0 10px;
  border-radius: 50%;
}
.right .index_clear {
  display: inline-block;
  width: 20px;
  margin: 0 10px;
  text-align: center;
  height: 20px;
}
.right .rank {
  float: right;
  margin-right: 20px;
}
</style>
